/**
 ** zhx.media.review scss
 ** Author: Vicco Wang
 ** Date : 2017/10/18
 ** Version : 1.0.0
 */
$base-dark-color : #222;
$base-light-color : #f2f2f2;
$base-blue : #2196F3;

.zhx-mr-wrapper{
  position:relative;
  background-color : darken($base-light-color, 20%);
  overflow: hidden;
  border:2px solid darken($base-light-color, 20%);
  box-sizing: border-box;

  .zhx-mr-mask{
    position:absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;height:100%;
    background-color: rgba(255,255,255,.65);
    z-index:30;

    >span{
      display: flex;
      justify-content: center;
      align-items: center;
      padding:10px 20px;
      font-weight:400;
      background-color: darken( $base-light-color, 10% );
      font-size:1.1em;
      border-radius:100px;
      cursor:pointer;
      transition: all .2s ease-in-out 0s;

      &:hover{
        background-color: $base-blue;
        color :#fff;
      }

    }

  }

  .zhx-play-area{
    position:absolute;
    overflow:hidden;
    z-index:10;
    display: flex;

    .zhx-videojs-player, .zhx-flux-play-slider{
      width:100%;
      height:100%;
    }

    .zhx-flux-play-slider{

      .fluxslider .images > div{
         //background-size: 100%;
      }

    }

    .zhx-play-percent{
      position:absolute;
      width:30px;height:30px;
      right:10px;bottom:10px;
      z-index:1000;
    }

  }
  .zhx-play-mask{
    position:absolute;
    box-shadow:0 5px 10px rgba(0,0,0,.15) inset;
    overflow: hidden;
    z-index:20;
  }

}

